require(["./config"], () => {
  require([
    "template",
    "request",
    "header",
    "footer",
    "bootstrap",
    "ddb",
    "land",
    "jquery",
  ], (tmp, req) => {
    class Guche {
      constructor() {
        this.prodList = [];
        this.init();
      }
      init() {
        // 从localStorage取数据
        const prodList = localStorage.getItem("prodList");
        if (prodList && prodList != "[]") {
          // 有数据=>渲染页面
          this.prodList = JSON.parse(prodList);
          this.render();
        } else {
          // m没有数据提示先去去购物
          alert("购物车暂无数据 请先去购物");
          location.href = "/html/liebiao.html";
        }
      }
      render() {
        // console.log(this.prodList);
        $(".my-cart-list").html(tmp("template_gwc", { list: this.prodList }));
        this.computedAll();
        this.delProd();
        this.addReduce();
        this.checkAll();
      }

      // 计算总共数量和总价
      computedAll() {
        //总价            已选多少件商品
        let allPrice = 0,
          checkedCount = 0;
        this.prodList.forEach((item) => {
          // allCount += item.count
          if (item.isChecked) {
            // 已选数量
            checkedCount += item.count;
            // 总价
            allPrice += item.count * item.price;
          }
        });
        $(".totalnnum").text(checkedCount);
        $(".totalprice").text(allPrice.toFixed(2));
      }
      // 点击删除按钮 找到对应的商品
      delProd() {
        // console.log(this);
        const btns = document.querySelectorAll(".btn-del"),
          that = this;
        for (let i = 0; i < btns.length; i++) {
          btns[i].onclick = function () {
            const id = $(this).attr("prodid") - 0;
            console.log(id);

            for (let j = 0; j < that.prodList.length; j++) {
              if (that.prodList[j].id === id) {
                that.prodList.splice(j, 1);
              }
            }
            // 再次存一下数据
            localStorage.setItem("prodList", JSON.stringify(that.prodList));
            that.init();
          };
        }
      }
      // 数量加减
      addReduce() {
        const that = this;
        $(".jian").click(function () {
          const id = $(this).attr("prodid") - 0;
          console.log(id);
          that.prodList.forEach((item) => {
            if (item.id === id) {
              item.count--;
              if (item.count <= 1) {
                item.count = 1;
              }
            }
          });
          // console.log(that.prodList);
          // 存 渲染
          localStorage.setItem("prodList", JSON.stringify(that.prodList));
          that.init();
        });
        $(".jia").click(function () {
          const id = $(this).attr("prodid") - 0;
          console.log(id);
          that.prodList.forEach((item) => {
            if (item.id === id) {
              item.count++;
            }
          });
          localStorage.setItem("prodList", JSON.stringify(that.prodList));
          that.init();
        });
      }
      // 全选
      checkAll() {
        const that = this;
        const checkAll = document.querySelector(".cart-checks");
        checkAll.onclick = function () {
          $(this).toggleClass("active");
          const flag = $(this).hasClass("active");
          that.prodList.forEach((item) => {
            item.isChecked = flag;
          });
          // 再次存一下数据
          localStorage.setItem("prodList", JSON.stringify(that.prodList));
          that.init();
        };

        const boxs = document.querySelectorAll(".cart-check");
        for (let i = 0; i < boxs.length; i++) {
          boxs[i].onclick = function () {
            const id = $(this).attr("prodid") - 0;
            that.prodList.forEach((item) => {
              if (item.id === id) {
                item.isChecked = !item.isChecked;
              }
            });
            // 再次存一下数据
            localStorage.setItem("prodList", JSON.stringify(that.prodList));
            that.init();
          };
        }
        // 判断
        const flag = that.prodList.every(item=>{
          return item.isChecked
        })
        flag? $(checkAll).addClass('active') : $(checkAll).removeClass('active')
      }
    }
    
    return new Guche();
  });
});
